<template>
  <div
    class="btn"
    :class="`btn-type-${props.type} ${notPadding ? 'slotConent' : ''} ${disable ? 'disadle' : ''}`"
    @mousemove="draggableFun($event)"
    @click="btnClick"
    ref="swiperItem"
    :style="{
      '--x': `${swiperItemX}px`,
      '--y': `${swiperItemY}px`,
      'min-width': `${!btnWidth ? btnSizeData.btnWidth : btnWidth}px`,
      height: `${!btnHeight ? btnSizeData.btnHeight : btnHeight}px`,
      borderRadius: `${!btnBorderRadius ? btnSizeData.btnBorderRadius : btnBorderRadius}px`,
      background: btnStyle.background,
      color: btnStyle.color
    }"
  >
    <div
      :style="{
        width: '100%',
        fontSize: `${!btnFontSize ? btnSizeData.btnFontSize : btnFontSize}px`,
        textAlign: 'center'
      }"
    >
      <span class="button-text" v-if="!slotConent">
        {{ btnContent }}
      </span>
      <div v-else class="button-slot">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, defineEmits, defineProps, computed } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "default" // primary,info
  },
  btnSize: {
    type: String,
    default: ""
  },
  btnWidth: {
    type: Number,
    default: 0
  },
  btnHeight: {
    type: Number,
    default: 0
  },
  btnBorderRadius: {
    type: Number,
    default: 0
  },
  btnFontSize: {
    type: Number,
    default: 0
  },
  btnContent: {
    type: String,
    default: "了解详情"
  },
  notPadding: {
    type: Boolean,
    default: false
  },
  btnLoading: {
    type: Boolean,
    default: false
  },
  disable: {
    type: Boolean,
    default: false
  },
  slotConent: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["btn-click"]);

/**
 * computed
 * */
const btnStyle = computed(() => {
  switch (props.type) {
    case "primary":
      return {
        background: "linear-gradient(178deg, #7047EB 1.77%, #5423E7 97.94%)",
        color: "#fff"
      };
    case "info":
      return {
        background: "rgba(255, 255, 255, 0.06)",
        color: "#fff"
      };
    default:
      return {
        background: "#33343e",
        color: "rgba(255, 255, 255, 0.60)"
      };
  }
});

const btnSizeData = computed(() => {
  switch (props.btnSize) {
    case "small":
      return {
        btnWidth: 140,
        btnHeight: 40,
        btnBorderRadius: 8,
        btnFontSize: 14
      };
    case "large":
      return {
        btnWidth: 180,
        btnHeight: 52,
        btnBorderRadius: 14,
        btnFontSize: 18
      };
    default:
      return {
        btnWidth: 140,
        btnHeight: 48,
        btnBorderRadius: 12,
        btnFontSize: 16
      };
  }
});

const swiperItem = ref();
const swiperItemX = ref(0);
const swiperItemY = ref(0);

const draggableFun = (e) => {
  swiperItemX.value = e.clientX - swiperItem.value?.getBoundingClientRect().left;
  swiperItemY.value = e.clientY - swiperItem.value?.getBoundingClientRect().top;
};

const btnClick = () => {
  if (!props.disable && !props.btnLoading) emit("btn-click");
};
</script>

<style lang="scss" scoped>
.btn {
  position: relative;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  &.notPadding {
    padding: 0;
  }
  span {
    position: relative;
  }
  .button-slot, .button-text {
    position: relative;
    z-index: 101;
    width: 100%;
  }
  .button-text {
    margin: 0 20px;
  }
  &::before {
    z-index: 100;
    --size: 36px;
    opacity: 0;
    content: "";
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    transform: translate(-50%, -50%);
    transition:
      all 0.3s ease,
      left 0s,
      top 0s;
  }

  &:hover::before {
    --size: 150px;
    opacity: 1;
  }
  :deep(.btn-content) {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    .left-icon {
      position: absolute;
      left: 24px;
    }
  }
}
.btn-type-default {
  border: 2px solid rgba(255, 255, 255, 0);
  &::before {
    background: radial-gradient(circle closest-side, rgba(90, 90, 90, 0.6), transparent);
  }
}
.btn-type-primary {
  box-shadow: 0px -2px 0px 0px rgba(38, 10, 152, 0.20) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.12) inset;
  background: linear-gradient(178deg, #7047EB 1.77%, #5423E7 97.94%);
  &::before {
    background: radial-gradient(circle closest-side, #7c55f1, transparent);
  }
}
.btn-type-warning {
  background: linear-gradient(180deg, #F03A68 0%, #F3164E 100%) !important;
  box-shadow: 0px -2px 0px 0px rgba(152, 10, 53, 0.20) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.12) inset;
  color: #fff !important;
  &::before {
    background: radial-gradient(circle closest-side, #f3164e, transparent);
  }
}
.btn-type-info,
.disadle {
  border: 2px solid rgba(255, 255, 255, 0) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.6) !important;
  &:hover {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
  }
}
.disadle {
  cursor: not-allowed !important;
  opacity: 0.8;
}
</style>
